<!-- 需求列表  -->
<template>
  <pageHeader
    show-back
    title="BOM树视图"
    :breadCrumb="['工厂建模', 'BOM树视图']"
  />
  <a-spin :loading="loading" class="cantainer">
    <a-row :gutter="25">
      <a-col :span="4">
        <div class="tree">
          <a-tree
            :data="treeData"
            v-if="treeData.length"
            :field-names="{ key: 'uuid', title: 'bomName' }"
            blockNode
            default-expand-all
            @select="select"
          >
            <template #title="nodeData">
              <div>{{ nodeData.bomName }}</div>
            </template>
            <template #icon>
              <icon-menu />
            </template>
          </a-tree>
        </div>
      </a-col>
      <a-col :span="16">
        <a-form :model="formData" ref="refForm" auto-label-width class="form">
          <a-row :gutter="15">
            <a-col :span="12">
              <a-form-item label="产品BOM编码">
                <a-input
                  placeholder="无需输入，系统自动生成..."
                  disabled
                  v-model="formData.bomCode"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="BOM名称" field="bomName">
                <a-input
                  disabled
                  v-model="formData.bomName"
                  placeholder="请输入产品BOM名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="BOM版本号" field="bomEdition">
                <a-input
                  disabled
                  v-model="formData.bomEdition"
                  placeholder="请输入产品BOM版本号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="启用状态" field="state">
                <a-select
                  v-model="formData.state"
                  placeholder="请选择"
                  disabled
                >
                  <a-option
                    v-for="(item, index) in ['启用', '停用']"
                    :key="item"
                    :value="index + 1"
                  >
                    {{ item }}
                  </a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="关联产品" field="productId">
                <a-input
                  placeholder="无需输入，自动带入"
                  :model-value="formData.management?.name"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="产品编码">
                <a-input
                  placeholder="无需输入，自动带入"
                  :model-value="formData.management?.number"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="规格型号">
                <a-input
                  placeholder="无需输入，自动带入"
                  :model-value="formData.management?.spec"
                  disabled
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="产品属性">
                <a-select v-model="formData.materialProperty" disabled>
                  <a-option :value="1">自制</a-option>
                  <a-option :value="2">委外</a-option>
                  <a-option :value="3">虚拟</a-option>
                  <a-option :value="4">采购</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div v-for="(item, index) in groupData" :key="item.id">
          <div class="tableTitle">{{ index + 1 }}/{{ item.name }}</div>
          <a-table :data="getTableList(item.id)" :pagination="false">
            <!-- arco-table的插槽，默认为columns -->
            <template #columns>
              <a-table-column
                v-for="header in headers"
                :key="header.name"
                :width="header.width || 200"
                :title="header.name"
                :data-index="header.code"
                align="center"
              >
                <template #cell="{ record }" v-if="!header.code">
                  <template v-if="header.name === '标准用量'">
                    <a-input-number
                      :min="1"
                      v-model="record.dosage"
                      disabled
                      hide-button
                    />
                  </template>
                  <template v-if="header.name === '损耗率'">
                    {{ record.wastage }}%
                  </template>
                  <template v-if="header.name === '材料属性'">
                    <a-select
                      v-model="record.productBomDetail.management.attribute"
                      disabled
                    >
                      <a-option :value="1">自制</a-option>
                      <a-option :value="2">委外</a-option>
                      <a-option :value="3">虚拟</a-option>
                      <a-option :value="4">采购</a-option>
                    </a-select>
                  </template>
                </template>
              </a-table-column>
            </template>
          </a-table>
        </div>
      </a-col>
    </a-row>
  </a-spin>
</template>

<script lang="ts" setup>
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { TbomBase, TProductBomDetail } from '@/api/FactoryModeling/type';
  import {
    GetProductBomTree,
    GetProductBom,
    GetProductProcessRoutePage,
  } from '@/api/FactoryModeling';
  import uniqueid from 'lodash.uniqueid';

  let route = useRoute();
  let loading = ref(false);
  const router = useRouter();
  let formData = reactive<TbomBase>({});
  let treeData = ref<any[]>([]);
  let groupData = ref<any[]>([]);
  const select = async (selectedKeys: any, { node }: any) => {
    if (node.id) {
      loading.value = true;
      let res = await GetProductBom({ id: node.id });
      Object.assign(formData, res);
      let productProcessRoutePage = await GetProductProcessRoutePage({
        productId: res.productId,
        page: 1,
        history: 1,
        size: 10,
      });
      if (productProcessRoutePage.content?.length) {
        groupData.value = productProcessRoutePage.content[0].groupData || [];
      }
    }
    loading.value = false;
  };
  let getTableList = (id: number) => {
    return (
      formData.productBomDetail?.filter(({ productGroupData }) => {
        return productGroupData?.some(
          ({ productGroupId }) => productGroupId === id
        );
      }) || []
    );
  };

  let circulateDate = (list?: any[]): any[] => {
    return (
      list?.map((item) => {
        return {
          ...item,
          uuid: uniqueid(''),
          children: circulateDate(item.children),
        };
      }) || []
    );
  };
  let loadTree = async () => {
    let res = await GetProductBomTree(route.query.saveId);
    treeData.value = circulateDate([res]);
    select('', { node: res });
  };
  loadTree();

  let headers = [
    {
      name: '物料编码',
      code: 'productBomDetail.management.number',
      width: 200,
    },
    {
      name: '物料名称',
      code: 'productBomDetail.management.name',
      width: 200,
    },
    {
      name: '规格型号',
      code: 'productBomDetail.management.spec',
      width: 200,
    },
    {
      name: '单位',
      code: 'productBomDetail.management.unitData.name',
      width: 100,
    },
    {
      name: '材料属性',
      width: 130,
      code: 'materialProperty',
    },
    {
      name: '标准用量',
      width: 200,
      fixed: 'right',
    },
    {
      name: '损耗率',
      width: 130,
      fixed: 'right',
    },
  ];
</script>

<style scoped lang="less">
  .cantainer {
    display: flex;
    height: 900px;
    .tree {
      border-right: 1px solid var(--color-neutral-4);
      height: 900px;
    }

    .tab {
      border-left: 4px rgb(var(--arcoblue-6)) solid;
      padding-left: 20px;
      margin-bottom: 20px;
      margin-top: 20px;
      font-size: 20px;
    }
  }
  .tableTitle {
    font-size: 16px;
    line-height: 44px;
  }
</style>
